<template>
  <div class="list-content">
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="编号" width="180"> </el-table-column>
      <el-table-column prop="name" label="品牌名称" width="180">
      </el-table-column>
      <el-table-column prop="level" label="级别" width="180"> </el-table-column>
      <el-table-column prop="count" label="商品数量" width="180">
      </el-table-column>
      <el-table-column label="设置">
        <template slot-scope="scope">
          <el-button
            type="text"
            class="classifity-add"
            @click="newJunior(scope.row)"
            >新增下级</el-button
          >
          <el-button
            type="text"
            class="classifity-look"
            @click="lookSubordinate"
            >查看下级</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="classifity-footer">
      <div class="pag">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="currentCount"
          @current-change="toPage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { branchApi, pageApi } from "@/http/commodity-management/branchApi";
export default {
  name: "ClassifityList",
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      current: 1,
      currentCount: 1,
      size: 10,
    };
  },
  created() {
    this.renderPag();
  },
  methods: {
    lookSubordinate() {
      this.$router.push({ path: "/goods/lookSubordinate" });
    },
    renderPag(page, size) {
      branchApi()
        .then((res) => {
          this.currentCount = res.data.number;
        })
        .catch((err) => {
          console.log(err);
        });
      pageApi(page, size)
        .then((res) => {
          // console.log(res);
          this.tableData = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    toPage(curr) {
      this.renderPag(curr, this.size);
    },
    newJunior(row) {
      this.$router.push({ path: "/goods/addClassify", query: { row } });
    },
  },
};
</script>


<style lang="scss" scoped>
@import "@/assets/sass/var.scss";

.classifity-footer {
  height: 50px;
  padding-top: 0;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #e4e4e4;

  .pag {
    float: right;
    margin-top: 8px;
  }
  .classifity-footer ::v-deep .active {
    background-color: $panel-color !important;
  }
}
</style>
